<template>
    <page-header-wrapper>
        <a-card :bordered="false" title="统计数据">
            <div class="table-page-search-wrapper">
                <a-form v-bind="queryFormItemLayout">
                    <a-row :gutter="48">
                        <a-col :md="8" :sm="24">
                            <a-form-item label="换热站">
                                <a-select v-model="queryParam.station_id"
                                          allowClear placeholder="请选择">
                                    <a-select-option v-for="item in stationList"
                                                     :key="item.id">{{ item.name }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="时间范围">
                                <a-range-picker v-model="timeDate"
                                                format="YYYY-MM-DD HH:mm:ss"
                                                show-time
                                                style="width: 100%"
                                                @change="handleChangeStartTime"/>
                            </a-form-item>
                        </a-col>
                        <a-col :md="8" :sm="24">
                            <a-form-item label="时间间隔">
                                <a-input v-model="interval"
                                         :min="1"
                                         style="width: 200px" type="number"/>
                                分钟
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <div class="table-operator">
                <div>
                    <a-button icon="search" type="primary" @click="onSearch">查询</a-button>
                    <a-button icon="redo" @click="onReset">重置</a-button>
                </div>
            </div>
            <a-table
                :columns="columns"
                :data-source="tableData"
                :loading="tableLoading"
                :pagination="pagination"
                :rowKey="tableRowKey"
                :rowSelection="rowSelection"
                :scroll="{ x: '100%' }"
                @change="handleChange">
            </a-table>
        </a-card>
        <CurrentData></CurrentData>
        <HistoryData></HistoryData>
    </page-header-wrapper>
</template>
<script>
import basic from '@/mixins/basic'
import {api_report, api_station, api_station_data} from "@/api/api";
import {DownloadFile} from '@/utils/common'
import CurrentData from './current'
import HistoryData from './history'

export default {
    mixins: [basic],
    components: {
        CurrentData,
        HistoryData
    },
    data() {
        return {
            request: api_station_data,
            queryParam: {
                station_id: '',
                start_time: '',
                end_time: '',
            },
            interval: 5,
            timeDate: [],
            resetQueryParam: {},
            pagination: {
                position: 'bottom',
                pageSizeOptions: ['10', '20', '30', '40', '50'],
                pageSize: 5,
                current: 1,
                total: 0
            },
            columns: [
                {
                    title: '时间',
                    dataIndex: 'create_time',
                    width: 200
                },
                {
                    title: '一供温度',
                    dataIndex: 'post_heat_1',
                },
                {
                    title: '一回温度',
                    dataIndex: 'get_heat_1',
                },
                {
                    title: '一供压力',
                    dataIndex: 'post_pressure_1',
                },
                {
                    title: '一回压力',
                    dataIndex: 'get_pressure_1',
                },
                {
                    title: '二供温度',
                    dataIndex: 'post_heat_2',
                },
                {
                    title: '二回温度',
                    dataIndex: 'get_heat_2',
                },
                {
                    title: '二供压力',
                    dataIndex: 'post_pressure_2',
                },
                {
                    title: '二回压力',
                    dataIndex: 'get_pressure_2',
                },
                {
                    title: '一网瞬时流量',
                    dataIndex: 'flow_1',
                },
                {
                    title: '一网瞬时热量',
                    dataIndex: 'heat_1',
                },
                {
                    title: '电动阀开度',
                    dataIndex: 'opening',
                },
                {
                    title: '循环泵频率',
                    dataIndex: 'cycle',
                },
                {
                    title: '补水泵频率',
                    dataIndex: 'post_cycle',
                },
            ],
            tableData: [],
            stationList: []
        }
    },
    methods: {
        init() {
            api_station.list().then(res => {
                this.stationList = res
                if (res.length) {
                    this.queryParam.station_id = res[0].id
                    this.onSearch()
                }
            })
        },
        onSearch() {
            this.pagination.current = 1
            this.pagination.pageSize = this.interval * 30 * 5
            this.getPage()
        },
        handleChangeStartTime(value1, valueStr) {
            this.queryParam.start_time = valueStr[0]
            this.queryParam.end_time = valueStr[1]
        },
        handleExport() {
            this.request.export().then(res => {
                console.log(res)
                DownloadFile(res, '报表.xls')
            })
        }
    }
}
</script>
